<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet"  type="text/css" href="css/mui.css">
		<link rel="stylesheet" type="text/css" href="css/registLogin/util.css">
		<link rel="stylesheet" type="text/css" href="css/registLogin/main.css">

		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>

		<style>
			.p-t-85 {
				padding-top: 10px;
			}
			
			.p-b-70 {
				padding-bottom: 35px;
			}
			
			.m-t-85 {
				margin-top: 15px;
			}
			
			.container-login100 {
				padding: 25px;
			}
			/*toast信息提示*/
			
			.mui-toast-container {
				bottom: 50% !important;
			}
			.mui-toast-message {
				opacity: 0.6;
				color: #fff;
				width: 180px;
				padding: 70px 5px 10px 5px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="container-login100">
				<div class="wrap-login100 p-t-85 p-b-20">
					<form id="userform">
						<span class="login100-form-title p-b-70">
							<h5 style="color: #000000; font-size: 30px">实习派 / <i>用户登录</i></h5>
						</span>
						<span class="login100-form-avatar">
							<img id="img_login_face" src="images/default_head_portrait.gif" alt="风间影月">
						</span>

						<div class="wrap-input100 validate-input m-t-85 m-b-35">
							<input class="input100" type="text" id="user_id" placeholder="账号" style="margin-bottom: 0; border: none">
							<span class="focus-input100"></span>
						</div>

						<div class="wrap-input100 validate-input m-b-50">
							<input class="input100" type="password" id="password" placeholder="密码" style="margin-bottom: 0; border: none">
							<span class="focus-input100"></span>
						</div>
						<div id="role_box" style="display: flex; font-size: 12px; color: dimgray">
							<div class="mui-input-row mui-radio mui-left">
								<label>学生</label>
								<input id="student" name="role_type" type="radio" value="3" checked>
							</div>
							<div class="mui-input-row mui-radio mui-left">
								<label>教师</label>
								<input id="teacher" name="role_type" type="radio" value="2">
							</div>
							<div class="mui-input-row mui-radio mui-left">
								<label>管理员</label>
								<input id="admin" name="role_type" type="radio" value="1">
							</div>
						</div>
						<div class="container-login100-form-btn" style="margin-top: 20px">
							<button type="submit" id="registOrLogin" class="login100-form-btn">
								登录
							</button>
						</div>
					</form>
					
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/app.js" ></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				// 禁止在退出后再退回用户主页
				mui.back = function() {
					return false;
				}
				// 判断用户是否注册登录过
				// 如果本地内存有全局的用户对象，此时直接跳转到首页
				var userinfo = app.getGlobalUserInfo();
				if(userinfo != null) {
					var role_type = userinfo.role_type;
					// 页面跳转
					if(role_type == 1) {
						console.log("管理员登陆成功！");
						mui.openWindow({
							url: "views/manager/manager.html", 
							id: "manager.html",
							createNew: true
						});
					} else if(role_type == 2) {
						console.log("教师登录成功！");
						mui.openWindow({
							url: "views/teacher/teacher.html", 
							id: "teacher.html",
							createNew: true
						});
					} else {
						console.log("学生登录成功！");
						mui.openWindow({
							url: "views/student/student.html", 
							id: "student.html",
							createNew: true
						});
					}
				}
				
			    var userForm = document.getElementById("userform");
				var user_idField = document.getElementById("user_id");
				var passwordField = document.getElementById("password");
				
				userForm.addEventListener("submit", function(e) {
					// 判断用户名是否为空，如果为空则让其获得焦点
					if(!app.isNotNull(user_idField.value)) {
						// 获取焦点
						user_idField.focus();
						app.showToast("用户名不能为空", "error");
						//return false;
					} 
					// 判断账号是否为空，如果为空则让其获得焦点
					else if(!app.isNotNull(passwordField.value)) {
						// 获取焦点
						passwordField.focus();
						app.showToast("密码不能为空！", "error");
						//return false;
					}
					// 判断用户名的长度是否超过限制
					else if(user_idField.value.length > 16) {
						app.showToast("用户名不能超过16位！", "error");
					} 
					// 判断密码的长度是否超过限制
					else if(passwordField.value.length > 16) {
						app.showToast("密码不能超过16位！", "error");
					} 
					// 去后端校验用户名和密码
					else {
						// 获取单选框选中的结果：即登录用户的类型
						var role_type = mui("#role_box input:checked")[0].value;
						mui.ajax(app.serverUrl + "/user/login",{
							data:{
								user_id: user_idField.value,
								password: passwordField.value,
								role_type: role_type
							},
							dataType:'json',//服务器返回json格式数据
							type:'post',//HTTP请求类型
							timeout:10000,//超时时间设置为10秒；
							headers:{'Content-Type':'application/json'},	              
							success:function(data){
								//服务器返回响应，根据响应结果，分析是否登录成功；
								// 控制台中输入日志
								// console.log(JSON.stringify(data));
								if(data.status == 200) {
									// 登录或者注册成功之后，保存全局用户对象到本地缓存
									var userinfo = data.data;
									app.setGlobalUserInfo(userinfo);
									// 页面跳转
									if(role_type == 1) {
										console.log("管理员登陆成功！");
										mui.openWindow({
											url: "views/manager/manager.html", 
											id: "manager.html",
											createNew: true
										});
									} else if(role_type == 2) {
										console.log("教师登录成功！");
										mui.openWindow({
											url: "views/teacher/teacher.html", 
											id: "teacher.html",
											createNew: true
										});
									} else {
										console.log("学生登录成功！");
										mui.openWindow({
											url: "views/student/student.html", 
											id: "student.html",
											createNew: true
										});
									}
								} else {
									app.showToast(data.msg, "error");
								}
							},
							error:function(xhr,type,errorThrown){
								//异常处理；
								console.log(type);
							}
						});
					}
					
					// 阻止默认事件，阻止表单默认提交
					e.preventDefault();
				});
			});
		</script>
	</body>

</html>